<template>
  <div>
     <h1>详情页</h1>
     <swiper :items="proInfo.pics" :interval="2000" :swiper-style="{width:'100%',height:'300px'}"></swiper> 
    <!-- 商品基本信息部分 -->
     <proBase :baseInfo="proInfo.basicInfo"></proBase>
     <!-- 大图部分 -->
      <h1>商品详情</h1>
      <!-- v-html 指令渲染html类型数据 -->
      <div v-html="proInfo.content"></div>
  </div>
  
</template>
<script>
import swiper from "@/components/swper.vue"
import proBase from './child/proBase.vue'
export default {
  name:"detail",
  components:{swiper,proBase},
  data(){
    return {
      nowid:"", //当前详情页id
      proInfo:{}//详情页数据
    }
  },
  created(){
    // 接收列表页出来的商品id  通过params传来
     this.nowid=this.$route.params.id;
     this.getDetail();
  },
  methods:{
    getDetail(){
      // 根据id获取详情页数据
      this.$axios({
        url:"https://api.it120.cc/ljf/shop/goods/detail",
        method:"get",
        params:{id:this.nowid} //详情页接口要发送id
      }).then(res=>{
           console.log(res.data,"详情页数据")
           this.proInfo=res.data.data;
      })
    }
  }
}
</script>